<template>
    <div class="forgot-password">
      <h2>忘记密码</h2>
      <form @submit.prevent="submitForm">
        <div class="input-group">
          <label for="identifier">邮箱或手机：</label>
          <input type="text" id="identifier" v-model="identifier" required>
          <button type="button" @click="sendVerificationCode" :disabled="isSendingCode">{{ buttonLabel }}</button>
        </div>
        <label for="verificationCode">验证码：</label>
        <input type="text" id="verificationCode" v-model="verificationCode" required>
        <button type="submit" @click="submitForm">重置密码</button>
      </form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        identifier: '',
        verificationCode: '',
        newPassword: '',
        isSendingCode: false,
        buttonLabel: '发送验证码'
      };
    },
    methods: {
      sendVerificationCode() {
        // 发送验证码的逻辑
        // 可以在此处发送 API 请求，将验证码发送到提供的邮箱或手机号
        this.identifier = document.getElementById('identifier').value;
        //本地测试
        const url = 'http://localhost:28080/api/user/forget?email='+this.identifier;
        //如果是远程测试
        //const url = 'http://43.143.82.72:28080/api/user/forget?email='+this.identifier;

        fetch(url)
          .then(response => response.json())
          .then(data => {
            // 在这里处理返回的数据
            console.log(data);
            if(data.code == 200) {
              //先将邮箱放入本地缓存，以便后续使用，再弹出成功提示
              localStorage.setItem('email', this.identifier);
              this.$message.success("验证码已发送")
              // 假设验证码成功发送
              console.log('验证码已发送：', this.verificationCode);
        
              // 在一定时间内禁用按钮以防止多次请求
              this.isSendingCode = true;
              this.buttonLabel = '60秒后重新发送';
        
              // 模拟延迟 60 秒后重新启用按钮
              setTimeout(() => {
                this.isSendingCode = false;
                this.buttonLabel = '发送验证码';
              }, 60000);
            } else {
              this.$message.error('验证码发送失败，请检查填写邮箱')
            }
          })
          .catch(error => {
            // 在这里处理错误
            console.error(error);
          });
  
        
      },
      submitForm() {
        // 提交表单的逻辑
        // 例如，可以检查输入的验证码并更新密码
        // 可以在此处发送 API 请求或执行任何必要的操作
        //本地测试
        const baseUrl = 'http://localhost:28080';
        //远程测试
        //const baseUrl = 'http://43.143.82.72:28080';
        const endpoint = '/api/user/check-captcha';
        this.verificationCode = document.getElementById('verificationCode').value;

        // 构建完整的 URL，将 email 和 captcha 参数添加到查询字符串中
        const url = `${baseUrl}${endpoint}?email=${encodeURIComponent(this.identifier)}&captcha=${encodeURIComponent(this.verificationCode)}`;

        fetch(url)
          .then(response => response.json())
          .then(data => {
            // 处理返回的数据
            console.log(data);
            if(data.code == 200) {
               // 提交表单成功后，可以将用户重定向到确认页面
                this.$router.push('/reset');
            } else {
               this.$message.error('验证码错误')
            }
          })
          .catch(error => {
            // 处理错误
            console.error(error);
          });
      }
    }
  }
  </script>
  
  <style scoped>
  .forgot-password {
    max-width: 400px;
    margin: 0 auto;
  }
  
  h2 {
    text-align: center;
    margin-top: 200px;
  }
  
  form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
  }
  
  .input-group {
    display: flex;
    align-items: center;
  }
  
  label {
    margin-bottom: 10px;
  }
  
  input {
    padding: 8px;
    margin-bottom: 15px;
  }
  
  button {
    padding: 10px;
    background-color: #FF9000;
    color: white;
    border: none;
    cursor: pointer;
    margin-left: 10px;
  }
  
  button:disabled {
    cursor: not-allowed;
    background-color: lightgray;
  }
  </style>  